<template>
	<view :data-theme="themeStyle">
		<!-- 这里是分销订单页面 -->
		<view class="withdraw-cate">
			<view class="cate-li" v-for="(item,index) in category" :key="index" @click="selectCate(item.id)">
				<view class="li-con" :class="{'active ns-text-color ns-bg-before':selectId==item.id}">
					{{item.name}}
				</view>
			</view>
		</view>
		<mescroll-uni ref="mescroll" @getData="getData" top="90" class="member-point" :size="8">
			<view class="goods_list" slot="list">
				<view class="order-list">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex" @click="toDetail(orderItem.fenxiao_order_id)">
						<view class="order-header">
							<text class="site-name">{{ orderItem.order_no }}</text>
							<text class="status-name ns-text-color" v-if="orderItem.is_refund==1">已退款</text>
							<text class="status-name ns-text-color" v-else-if="orderItem.is_settlement==1">已结算</text>
							<text class="status-name ns-text-color" v-else>待结算</text>
						</view>
						
						
						<view class="order-body">
							<view class="goods-wrap">
								<view class="goods-img">
									<image :src="$util.img(orderItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex)" mode="aspectFill" :lazy-load="true"></image></view>
								<view class="goods-info">
									<view class="goods-name">{{ orderItem.sku_name }}</view>
									<view class="goods-sub-section">
										<!-- <view>
											<text class="goods-price">
												<text class="unit">￥</text>
												<text>{{ orderItem.price }}</text>
											</text>
										</view> -->
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ orderItem.num }}
											</text>
										</view>
									</view>
									<view class="order-time ns-text-color-gray">
										{{$util.timeStampTurnTime(orderItem.create_time)}}
										<text class="goods-price">
											<text class="unit">￥</text>
											<text>{{ orderItem.price }}</text>
										</text>
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="order-base-info active">
								<view class="order-type ">
									<text>返{{fenxiaoWords.account}}金额：</text>
									<text class="ns-text-color">{{ $lang('common.currencySymbol') }}{{orderItem.commission}}</text>
								</view>
								<view class="total">
									<text>合计：</text>
									<text class="ns-text-color">{{ $lang('common.currencySymbol') }}{{orderItem.real_goods_money}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cart-empty">
					<ns-empty text="您暂时没有订单哦" :isIndex="!1" v-if="selectId==0 && orderList.length==0 && emptyShow"></ns-empty>
					<ns-empty text="您没有待结算订单哦" :isIndex="!1" v-if="selectId==1 && orderList.length==0 && emptyShow"></ns-empty>
					<ns-empty text="您没有已结算订单哦" :isIndex="!1" v-if="selectId==2 && orderList.length==0 && emptyShow"></ns-empty>
					<ns-empty text="您没有已退款订单哦" :isIndex="!1" v-if="selectId==3 && orderList.length==0 && emptyShow"></ns-empty>
				</view>
				
			</view>
		</mescroll-uni>


		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
	import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
	import fenxiaoWords from 'common/js/fenxiao-words.js';
	import globalConfig from '@/common/js/golbalConfig.js'
	export default {
		data() {
			return {
				category: [{
						id: 0,
						name: "全部",
						number: 2
					},
					{
						id: 1,
						name: "待结算",
						number: 0
					},
					{
						id: 2,
						name: "已结算",
						number: 0
					},
					{
						id: 3,
						name: "已退款",
						number: 0
					}
				],
				selectId: 0,
				orderList: [],
				// is_settlement
				emptyShow:false
			}
		},
		components: {
			nsShowToast
		},
		mixins: [fenxiaoWords,globalConfig],
		onShow() {
			this.$langConfig.refresh();
			
			uni.setNavigationBarTitle({
				title: this.fenxiaoWords.concept+'订单'
			});
			
			if (uni.getStorageSync('token')) {
				
			} else {
				this.$util.redirectTo(
					'/pages/login/login/login',
					{
						back: '/otherpages/fenxiao/order/order'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			//获得列表数据
			getData(mescroll) {
				this.emptyShow=false;
				if(mescroll.num==1){
					this.orderList = []
				}
				this.$api.sendRequest({
					url: '/fenxiao/api/order/page',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						is_settlement:this.selectId
					},
					success: res => {
						this.emptyShow=true;
						let newArr=[]
						let msg=res.message;
						if(res.code==0 && res.data && res.data.list){
							newArr = res.data.list;
						}else{
							this.$util.showToast({title:msg})
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
						this.orderList = this.orderList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			selectCate(e){
				this.selectId=e;
				this.$refs.mescroll.refresh()
			},
			toDetail(e){
				this.$util.redirectTo("/otherpages/fenxiao/order_detail/order_detail",{id:e})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .fixed{position: relative;top:0}
	/deep/ .empty{margin-top:0 !important}
	.cart-empty{position:relative;top: 50%;padding-top: 104px !important;}
	.withdraw-cate {
		width: 100%;
		height: 90rpx;
		display: flex;
		border-bottom: 1rpx solid $ns-border-color-gray;
		box-sizing: border-box;
		background: #ffffff;
		.cate-li {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			.li-con {
				display: inline-block;
				line-height: 90rpx;
				height: 100%;
			}

			.li-con.active {
				box-sizing: border-box;
				position:relative
			}
			.li-con.active::after {
				position: absolute;
				bottom:0;
				left:0;
				content: '';
				width:100%;
				height: 2px;
				// background-color: $base-color;
			}
		}
	}
	.goods_list {
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 18rpx;
		.order-item{
		
			padding:24rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background: #ffffff;
			position: relative;
			margin-bottom: 18rpx;
				
			.order-header{
				display: flex;
				align-items:center;
				position: relative;
				padding-bottom: 24rpx;
				line-height: 1;
				font-size: $ns-font-size-sm;
				
				.icondianpu{
					display: inline-block;
					line-height: 1;
					margin-right: 12rpx;
				}
				
				.status-name{
					flex: 1;
					text-align: right;
				}
			}
			
			.order-body {
				margin-bottom: 24rpx;
				.goods-wrap {
					display: flex;
					position: relative;
					border-top: 1rpx solid $ns-border-color-gray;
					&:last-of-type{
						margin-bottom: 0;
					}
					
					.goods-img {
						width: 170rpx;
						height: 170rpx;
						padding: 24rpx 0 0 0;
						margin-right: 5rpx;
							
						image {
							width: 100%;
							height: 100%;
							border-radius: $ns-border-radius;
						}
					}
							
					.goods-info {
						flex: 1;
						position: relative;
						padding: 24rpx 0 0 0;
						max-width: calc(100% - 200rpx);
						margin-left: 18rpx;
							
						.goods-name {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							line-height: 1.5;
							font-size: $ns-font-size-sm;
							color: #000;
						}
							
						.goods-sub-section {
							width: 100%;
							line-height: 1.5;
							display: flex;
							align-items: center;
							font-size: $ns-font-size-sm;
							margin-top: 20rpx;
							
							
							.unit {
								font-size: $ns-font-size-base;
								margin-right: 2rpx;
							}
							
							view{
								flex: 1;
								line-height: 1;
								&:last-of-type{
									text-align: right;
									
									.iconfont{
										line-height: 1;
										font-size: $ns-font-size-base;
									}
								}
							}
						}
						.order-time{
							margin-top:6px;
							font-size: $ns-font-size-sm;
							color: #838383;
							
							.goods-price {
								font-size: $ns-font-size-sm;
								float: right;
								color:#000;
							}
						}
						
						.goods-operation{
							text-align: right;
							padding-top: 20rpx;
						
							.operation-btn{
								line-height: 1;
								padding: 14rpx 20rpx;
								color: #333;
								display: inline-block;
								border-radius: 28rpx;
								background: #fff;
								border: 0.5px solid #999;
								font-size: $ns-font-size-base;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
			
			
			.order-footer{
				border-top: 1rpx solid $ns-border-color-gray;
				padding-top: 24rpx;
				.order-base-info {
					display: flex;
					
					.total{
						text-align: right;
						padding-top: 20rpx;
						flex: 1;
						font-size: $ns-font-size-sm;
						
						& > text{
							line-height: 1;
							margin-left: 10rpx;
						}
					}
					
					.order-type{
						font-size: $ns-font-size-sm;
						
						& > text{
							line-height: 1;
						}
					}
				}
				.order-base-info.active {
					.total{
						padding-top: 0;
					}
					.order-type{
						padding-top: 0;
					}
				}
				
				.order-operation{
					text-align: right;
					padding-top: 20rpx;
									
					.operation-btn{
						line-height: 1;
						padding: 20rpx 26rpx;
						color: #333;
						display: inline-block;
						border-radius: 32rpx;
						background: #fff;
						border: 0.5px solid #999;
						font-size: $ns-font-size-base;
						margin-left: 10rpx;
					}
				}
			}
		}
		.order-item:last-child{
			border: none;
		}
	}
</style>
